<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const vm = {}
      // 第一个参数为需要定义属性的对象
      // 第二个参数为需要定义的属性名
      // 第三个参数为属性描述符
      Object.defineProperty(vm, 'uname', {
        // 访问vm的uname时会触发get方法
        get() {
          console.log('触发了get')
          return 'happy'
        },
        // 试图修改vm的uname的时候就会触发set方法
        set(val) {
          // val就是你试图改变的值
          console.log(val)
          console.log('触发了set')
        },
      })
      console.log(vm)
      //
      //
      //
      //
      //定义的数据
      const data = {
        uname: 'happy',
        age: 25,
      }
      // 作用就是直接在一个对象上定义一个新属性，
      // 或者修改一个已经存在的属性
      //当前组件实例
      const vr = {}
      Object.defineProperty(vr, 'uname', {
        get() {
          console.log('触发了get')

          return data['uname']
          // 用person.uname可以重新手动查看uname
        },
        // 设置属性值的时候
        set(val) {
          data.uname = val
          console.log('触发了set')
        },
      })
      console.log(vr)
    </script>
  </body>
</html>
